<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>弹性容器</title>
        <style type="text/css">
            p { text-align: center; font-weight: bold;}
            .wrapper {
                margin: 15px auto;
                border: 1px solid blue;
                box-shadow: 0 0 10px -5px blue;
                width: 400px;
                height: 400px;
            }

            .wrapper>span:nth-child(2n) { background: #dfdfdf;}
            .wrapper>span:nth-child(2n+1) { background: #ff8;}

            .zero { overflow: hidden; }
            /* 亲子选择器(直接子元素选择器) */
            .zero>span { float: left; width: 50px; }

            /* 弹性容器 ( flex container ) */
            .first{ 
                /* 使元素成为 弹性容器 ( flex container ) */
                display: flex; 

                /* 设置 弹性容器 主轴方向: row 表示水平方向从左到右 */
                flex-direction: row;

                /* 设置 弹性项目 在 弹性容器 中 主轴(main axis)方向 的 排列方式 */
                justify-content: space-between;
                /* justify-content: flex-start ; 表示 靠 主轴方向起始位置(main-start) 排列 (默认值) */
                /* justify-content: center ; 表示 在 主轴方向 居中 排列 */
                /* justify-content: flex-end ; 表示 靠 主轴方向 结束位置 排列 */
                /* justify-content: space-between; 表示 均匀排列每个元素(首个元素放置于起点，末尾元素放置于终点) */
                /* justify-content: space-around; 表示 均匀排列每个元素(每个元素周围分配相同的空间) */
                /* justify-content: space-evenly; 表示 均匀排列每个元素(每个元素之间的间隔相等) */

                /* 设置 弹性项目 在 弹性容器 中 交叉轴(cross axis)方向 的排列方式 */
                align-items: center;
                /* align-items: flex-start; 表示 靠 交叉轴方向起始位置(cross-start) 排列 */
                /* align-items: center; 表示 在 交叉轴方向 居中排列 */
                /* align-items: flex-end; 表示 靠 交叉轴方向结束位置(cross-end) 排列 */
                /* align-items: stretch; 使所有 弹性项目 沿着交叉轴方向拉伸以填充父容器 (默认值) */
            }

            /* 存在于 弹性容器 中的 直接子元素都是 弹性项目 ( flex item ) */
            .first>span {
                /* 设置 弹性项目 在 弹性容器 主轴方向 的尺寸 ( main-size ) */
                flex-basis: 50px;
            }

            .second{ 
                display: flex; 
                /* 设置 弹性容器 主轴方向: row-reverse 表示水平方向从右到左 */
                flex-direction: row-reverse;
            }

            .second>span {
                /* 设置 弹性项目 在 弹性容器 主轴方向 的尺寸*/
                flex-basis: 50px;
            }

            .third{ 
                display: flex; 
                /* 设置 弹性容器 主轴方向: column 表示垂直方向从上到下 */
                flex-direction: column;
                /* 控制 弹性项目 在 弹性容器 中 主轴方向 的 排列方式 */
                justify-content: space-between;
                /* 控制 弹性项目 在 弹性容器 中 交叉轴方向 的排列方式 */
                align-items: center;
            }

            .third>span {
                /* 设置 弹性项目 在 弹性容器 主轴方向 的尺寸 ( main-size ) */
                flex-basis: 50px;
            }

            .fourth{ 
                display: flex; 
                /* 设置 弹性容器 主轴方向: column-reverse 表示垂直方向从下到上 */
                flex-direction: column-reverse;
            }

            .fourth>span {
                /* 设置 弹性项目 在 弹性容器 主轴方向 的尺寸*/
                flex-basis: 50px;
            }
        </style>
    </head>
    <body>
        
        <div class="wrapper zero">
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>D</span>
            <span>E</span>
        </div>

        <p>弹性容器的主轴(main axis)是水平方向从左到右(flex-direction: row)</p>
        <div class="wrapper first">
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>D</span>
            <span>E</span>
        </div>

        <p>弹性容器的主轴(main axis)是水平方向从左到右(flex-direction: row-reverse)</p>
        <div class="wrapper second">
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>D</span>
            <span>E</span>
        </div>

        <p>弹性容器的主轴(main axis)是水平方向从左到右(flex-direction: column)</p>
        <div class="wrapper third">
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>D</span>
            <span>E</span>
        </div>

        <p>弹性容器的主轴(main axis)是水平方向从左到右(flex-direction: column-reverse)</p>
        <div class="wrapper fourth">
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>D</span>
            <span>E</span>
        </div>

        <p>
            <a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒子(MDN)</a>
            &nbsp;|&nbsp;
            <a href="https://www.runoob.com/cssref/css-reference.html#flexbox">参考手册(runoob)</a>
            &nbsp;|&nbsp;
            <a href="https://www.w3school.com.cn/cssref/index.asp">参考手册(w3school)</a>
        </p>

    </body>
</html>